<template>
  <div class="card card-custom gutter-b example example-compact" id="tableUserRoleAlreadyListBody">

    <div class="card-body">
      <!--查询条件-->
      <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
        <div class="m-portlet__body">
          <div class="form-group m-form__group row">
            <label class="col-form-label">姓名：</label>
            <div class="col-lg-2">
              <input type="text" class="form-control" v-model="searchForm.name" placeholder="请输入">
            </div>
            <label class="col-form-label">账号：</label>
            <div class="col-lg-2">
              <input type="text" class="form-control" v-model="searchForm.account" placeholder="请输入">
            </div>
            <label class="col-form-label">状态：</label>
            <div class="col-lg-2">
              <el-select maxlength="20" v-model="searchForm.status" placeholder="请选择">
                <el-option value="">请选择</el-option>
                <el-option v-for="item in [{ value: '0', label: '正常' }, { value: '1', label: '冻结' }, { value: '2', label: '禁用' }]"
                  :key="item.vsalue" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <label class="col-form-label">邮箱：</label>
            <div class="col-lg-3">
              <input type="text" class="form-control" v-model="searchForm.email" placeholder="请输入">
            </div>
          </div>
        </div>
        <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
          <div class="m-form__actions m-form__actions--solid">
            <div class="row">
              <div class="col m--align-left">
                <div class="form-group m-form__group row">
                  <b-button :pressed="false" variant="btn btn-primary font-weight-bold font-size-sm py-3 px-8 mr-2 " @click="search()"><span><i
                    class="flaticon-search-magnifier-interface-symbol"></i><span>查 询</span></span></b-button>
                    <b-button :pressed="false" variant="btn btn-light font-weight-bold font-size-sm py-3 px-8 mr-2 " @click="resetAll()">
                    <span><i class="flaticon2-refresh"></i><span>重 置</span></span></b-button> 
                  <button class="btn btn-light-primary font-weight-bold font-size-sm py-3 px-8 mr-2"                   
                  v-permission="{ action: '/oauthRole/delOauthAR', effect: 'display' }"  
                  @click="delXtUR"
                    :disabled="this.sels.length === 0">
                    <span><i class="fas fa-user-minus"></i><span>移 除</span></span>
                  </button>
                </div>
              </div>
              <div class="col m--align-right">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--分页组件-->
    <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row
      :data="roleUserRoleAlreadyList">
      <!-- 复选框 -->
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column label="序号" min-width="50">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="account" label="账号" min-width="100"></el-table-column>
      <el-table-column align="center" prop="name" label="姓名" min-width="100"></el-table-column>
      <el-table-column align="center" :formatter="formatterTypes" show-overflow-tooltip prop="oauthAccountTypes"
        label="类型" min-width="200">

      </el-table-column>
      <el-table-column align="center" prop="status" label="状态" min-width="110">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 0">
            <span
              class="label label-lg label-light-primary label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">正常</span>
          </div>
          <div v-else-if="scope.row.status == 1">
            <span
              class="label label-lg label-light-warning label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">冻结</span>
          </div>
          <div v-else-if="scope.row.status == 2">
            <span
              class="label label-lg label-light-danger label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">禁用</span>
          </div>
          <div v-else>
            <span
              class="label label-lg label-light-warning label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">未知</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="email" label="邮箱" min-width="200"></el-table-column>
      <el-table-column align="center" prop="createTime" label="注册时间" min-width="160"></el-table-column>
    </el-table>
    <div class="block">
      <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pageNo" :page-sizes="[5, 10, 30, 50]" :page-size="pageSize"
        layout="->,total, sizes, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
  data() {
    return {
      searchForm: { "flag": "1", accountTypeIdTemp: "", accountTypeId: "", name: "", account: "", typeCondition: "", status: "", email: "", roleId: "" },
      roleUserRoleAlreadyForm: { roleId: "", },
      roleUserRoleAlreadyList: [],
      typeList: [],
      sels: [], //当前选框选中的值
      pageNo: 1,      // 默认当前是第一页
      pageSize: 5,    // 当前每页的数据是5条
      totalCount: 0   // 总数默认为0
    }
  },
  components: {
  },
  props: {
    roleData: []
  },
  watch: {
    "searchForm.accountTypeIdTemp": {//监听字段变化
      handler: function (newVal, old) {
        if (newVal) {
          this.searchForm.accountTypeId = newVal.join(",");
        }
      }
    },
  },
  mounted() {
    this.initList();
    // this.initTypeList();
  },
  methods: {
    initList() {
      this.searchForm.roleId = this.roleData.id;
      showWating({ renderBody: "tableUserRoleAlreadyListBody" });
      var params = {};
      params.usePageNo = true;//采用第几页进行分页（兼容）
      params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
      params.pageNo = this.pageNo;//开始的记录序号   
      params.searchJson = JSON.stringify(this.searchForm);//为form元素     
      apiUtil.queryPage(process.env.VUE_APP_OAUTH_API + "/oauthRole/account/list", params).then(({ data }) => {
        this.roleUserRoleAlreadyList = data.data;//给结果集赋值
        this.totalCount = data.total;// 获取当前数据的总数    
      });
    },
    handleSelectionChange(sels) {//获取选中的值
      this.sels = sels;
    },
    formatterTypes(row, column) {
      let oauthAccountTypes = row.oauthAccountTypes;
      let accountTypeText = null;
      if (null != oauthAccountTypes) {
        for (var i = 0; i < oauthAccountTypes.length; i++) {
          if (null == accountTypeText) {
            accountTypeText = oauthAccountTypes[i].name;
          } else {
            accountTypeText = accountTypeText + "," + oauthAccountTypes[i].name;
          }
        }
      }
      return accountTypeText;
    },
    delXtUR() { // 移除账户
      if (this.sels.length === 0) {
        handleAlert("请选择要移除的账户", "warning", 3)
        return;
      }
      // 移除前提示
      this.$confirm("确认移除选择的账户吗?", "提示", { type: "warning", }).then(() => {
        let id = this.sels.map((item) => item.id);
        // 根据后台想要的参数格式选择
        let ids = id.join(",");
        let params = { accountId: ids, roleId: this.roleData.id };
        apiUtil.delete(process.env.VUE_APP_OAUTH_API + "/oauthRole/delOauthAR", params).then(data => {
          if (data.data.success) {
            handleAlert("移除账户成功", "success", 3);
            this.$emit("change", data);//组件传值，即向父级模态框中传递值，采用change方式，目标刷新主列表使用
            this.search();
          } else {
            handleAlert("移除账户失败", "error", 3);
          }
        });
      }).catch(() => { });//注意这里，这里是重点！！！;        
    },
    handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
      this.pageSize = val;  // 修改页的大小
      this.initList();       // 按新的pageNo和pageSize进行查询
    },
    handleCurrentChange(val) { // 修改当前页所触发的函数
      this.pageNo = val;       // 更新当前的页
      this.initList();          // 按新的pageNo和pageSize进行查询
    },
    search() {
      this.pageNo = 1;       // 更新当前的页
      this.initList();          // 按新的pageNo和pageSize进行查询
    },
    resetAll() {
      Object.assign(this.$data.searchForm, this.$options.data().searchForm);
      this.search();
    },
    initTypeList() {
      let params = {};
      apiUtil.query(process.env.VUE_APP_OAUTH_API + "/oauthAccountType/list/" + this.roleData.id, params).then(({ data }) => {
        this.typeList = data.data;
      });
    },
  }
};
</script>
<style scoped>
.card.card-custom {
  box-shadow: 0px 0px 30px 0px #ffffff !important;
}

.card-body {
  padding: 0rem !important;
}
</style>